<template>
    <div id="login_bg">
        <div class="lpgon_fx">
            <div>
                  <div v-show="true" class="bg_fx"></div>
                <div class="shici">{{shici}}</div>
            </div>
            
            <div class="content_fx">
                <p>Login Account</p>
                <div class="form" style="width:300px">
                     <el-form ref="formRef" :model="form" :rules="rules" label-position='top'>
                             <el-form-item label="USERNAME" prop="username">
                                 <el-input v-model="form.username"></el-input>
                              </el-form-item>
                             <el-form-item label="PASSWORD"  prop="password">
                                 <el-input v-model="form.password"></el-input>
                              </el-form-item>

                             <!-- <el-form-item label="PHONE" prop="phone">
                                 <el-input v-model="form.phone"></el-input>
                              </el-form-item>
                             <el-form-item label="EMAIL" prop="email">
                                 <el-input v-model="form.email"></el-input>
                              </el-form-item> -->
                     </el-form>
                </div>
            </div>
            <div class="btnbox">
                <el-button type="primary" @click="toHome"> <el-icon class="el-icon--right"><Right /> </el-icon></el-button>
            </div>
        </div>
    </div>
</template>
<script>
// 图标
import { Right } from '@element-plus/icons-vue'
import { ElMessage  } from 'element-plus'
import { getLogin } from '@/http/api.js';
import { useRouter } from 'vue-router'
import { defineComponent, reactive,ref } from 'vue'
import { encryption } from '@/utils/utils';
import { setSession } from '@/http/storage';
export default defineComponent({
    setup() {
        let form = reactive({
                username:'',
                password:'',
                // phone:'',
                // email:'',
        })
        let shici = ref('')
        const rules = reactive({
            username:[{required: true, message: '请填写用户名', trigger: 'blur'}],
            password:[{required: true, message: '请填写密码', trigger: 'blur'}]
        })
        const formRef = ref(null)
        const router = useRouter()
        // 每日诗词
       const jinrishici = require('jinrishici');
            jinrishici.load(result => {
            shici.value = result.data.content
        }, errData => {
            console.err(errData);
        });
        const toHome = ()=>{
            formRef.value.validate((valid)=>{
                if(valid){
                     const user = encryption({
                        data: form,
                        key: 'pigxpigxpigxpigx',
                        param: ['password']
                    })
                    getLogin(user).then(res => {
                        if(res.data && res.data.length !== 0){
                            ElMessage({
                                message: res.msg,
                                type: 'success'
                            })
                            setSession('userInfo',res.data[0])
                            router.push({name:'home'})
                        }
                    })
                }
            })
        }
        return{
            shici,
            form,
            rules,
            formRef,
            toHome
        }
    },
    components:{ Right },
})
</script>
<style lang="scss" scoped>
 #login_bg{
     width: 100%;
     height: 100%;
     background-color: #f1f9ff;
     .lpgon_fx{
         width: 900px;
         height: 750px;
         border-radius: 4%;
         background-color: #fff;
         position: fixed;
         transform:translate(-50%,-50%);
         top: 50%;
         left:50%;
         right:50%;
         display: flex;
         .bg_fx{
            width: 415px;
            height: 415px;
            transform:translate(-10%,-10%);
            border-radius: 4%;
            background-image: url('../../assets/images/bg.jpg');
            background-size: 100% 100%;
            box-shadow:-10px 25px 80px #549cccab;
            // border: 5px solid rgba(255, 255, 255, 0.705);
         }
         .content_fx{
             p {
               width: 100%;
               font-size: 40px;  
             }
         }
         .btnbox{
              transform:translate(20%,85%);
             .el-button{
                 width: 165px;
                 height: 70px;
                 border-radius: 10px;
                 font-size: 30px;
                 font-weight: bold;
                 background: #454df3;
                 box-shadow: 0 10px 40px #4845f3a6;
             }
         }
     }
     .shici{
         width: 100%;
         text-align: center;
         transform:translate(-80%,-50%);
         position: fixed;
         bottom:3%;
         left:50%;
         right:50%;
         color: #d1e6ee;
         font-size: 13px;
     }
 }
::v-deep  .el-form-item{
        padding-bottom: 32px;
        .el-input__inner{
            box-shadow: none;
            border-radius: 0px;
            background: none;
            border-bottom: 1px solid rgb(241, 241, 241);
        }
}
.el-icon--right{
    font-size: 50px;
    font-weight: bold;
}
</style>